<script lang="ts">
import {defineComponent, ref, reactive, toRefs, watch, h, inject, markRaw} from 'vue'
import WallpaperContent from "@/components/content/wallpaper/index/index.vue"
import WallpaperFooter from "@/components/content/wallpaper/footer/index.vue"
import { ExpandAltOutlined, FullscreenExitOutlined, DownOutlined, CreditCardOutlined } from '@vicons/antd'
import TimeComponent from '@/components/common/time/index.vue'
import SearchComponent from '@/components/common/search/index.vue'

export default defineComponent({
  components: {
    WallpaperContent, WallpaperFooter,
    ExpandAltOutlined, FullscreenExitOutlined, DownOutlined, CreditCardOutlined,
    TimeComponent, SearchComponent
  },
  setup() {
    const state = reactive({
      showModal: false,
      style: {
        type: 0,
        span: '20 s:16 m:14 l:10 xl:12 2xl:12',
        offset: '2 s:4 m:5 l:7 xl:6 2xl:6',
      },
      // application: [
      //   {id:1, key: 'wallpaper', title: '🌫️ 电脑壁纸', component: WallpaperContent, footer: WallpaperFooter},
      // ],
      showFooter: false,
    })
    const raws = markRaw({
      application: [
        {id:1, key: 'wallpaper', title: '🌫️ 电脑壁纸', component: WallpaperContent, footer: WallpaperFooter},
      ]
    })
    const methods = {
      fullScreen() {
        let a = '20 s:16 m:14 l:10 xl:12 2xl:12'
        let b = '24 s:24 m:24 l:24 xl:24 2xl:24'
        let c = '2 s:4 m:5 l:7 xl:6 2xl:6'
        let d = '0 s:0 m:0 l:0 xl:0 2xl:0'
        if (state.style.type === 0) {
          state.style.span = b
          state.style.offset = d
          state.style.type = 1
        } else {
          state.style.span = a
          state.style.offset = c
          state.style.type = 0
        }
      }
    }
    return {
      ...toRefs(state),
      ...markRaw(raws),
      ...methods
    }
  }
})
</script>

<template>
  <div v-for="app in application" :key="app.id">
    <n-button @click="showModal = true">
      {{app.title}}
    </n-button>
    <n-modal v-model:show="showModal">
      <n-grid cols="24" item-responsive responsive="screen">
        <n-grid-item :span="style.span" :offset="style.offset" style="text-align: left;">
          <n-card
              closable @close="showModal = false"
              :title="app.title"
              :bordered="false"
              size="small"
              role="dialog"
              aria-modal="true"
              :style="style.type === 1 ? 'height: 100vh' : ''"
          >
            <template #header-extra>
              <n-icon size="18" @click="fullScreen">
                <div v-if="style.type === 0">
                  <expand-alt-outlined/>
                </div>
                <div v-else>
                  <fullscreen-exit-outlined/>
                </div>
              </n-icon>&nbsp;&nbsp;
            </template>
                <n-loading-bar-provider>
                  <keep-alive>
                    <component :is="app.component" :key="app.key"/>
                  </keep-alive>
                </n-loading-bar-provider>
            <template #footer>
              <n-switch v-model:value="showFooter">
                <template #checked>
                  📂
                </template>
                <template #unchecked>
                  📁
                </template>
              </n-switch>
              <n-collapse-transition :show="showFooter">
                <component :is="app.footer" :key="app.key+'-footer'"/>
              </n-collapse-transition>

            </template>
          </n-card>
        </n-grid-item>
      </n-grid>
    </n-modal>
  </div>
</template>



<style scoped>

</style>